import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $http, $Lazy, globalConfig } = window
const { COVIDUrl } = globalConfig
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const $time 		= $Lazy.file(()=>import('@com/utils/time'))
const $cache 		= $Lazy.file(()=>import('#private/cache-api'))
const CodeList 		= $Lazy.state(()=>import('../specimen/cpt/code-list'))

// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys: [],
		// 搜索表单列表
		forms : [
			{ label: '板号',				name: 'board_no' },
			{ label: '操作人',			name: 'operator_id',	type:'select',		loading:true},
			{ label: '创建日期',			names: ['created_at_start','created_at_end'], name:'jz-time', type:'date-range' },
		]
	}
	
	model = {}
	tableNum = new Array(96).fill('')
	
	componentDidMount(){
		this.getSelect()
	}
	onTime = () => {
		$time.then(f=>{
			const arr = f.duration['7-0-24']()
			this.resetModel = { created_at_start: arr[0], created_at_end: arr[1], 'jz-time':arr }
			this.model = $fn.copy(this.resetModel)
			this.fetch()
		})
	}
	// 获取下拉数据
	getSelect = () => {
		const { forms } = this.state
		$cache.then( async f => {
			// 操作人
			this.employee = await f.getCache({ api:'employee' })
			$fn.setRow( forms, 'operator_id', this.employee )
			this.setState({ forms })
			this.onTime()
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,COVIDUrl+'board/query',{COVID:true,isIndex:true})
	
	// 表单
	cols = [
		{ title: '板号',				dataIndex: 'boardNo',			width:60 },
		{ title: '操作人',			dataIndex: 'operator',			...$fn.table.name,		render: text => $fn.getState(this.employee,text) },
		{ title: '创建日期', 		dataIndex: 'createdAt', 		...$fn.table.time },
	]
	
	// 操作按钮
	controls = () => {
		const {selectedKeys} = this.state
		return [
			Controls.click.call(this, '保存', ()=> {
				this.codeListRef.saveOtherInfo(this.rows.id)
			},{disabled:!$fn.hasArray(selectedKeys)}),
			// Controls.pushTo.call(this,'预览', `preview-board?boardData=${JSON.stringify(this.tableNum)}`,{ghost:true,disabled:!$fn.hasArray(selectedKeys)}),
			Controls.click.call(this, '打印', ()=> {
				const printIframe = document.createElement('iframe')
				printIframe.style.cssText = 'position:fixed;width:100%;height:100%;z-index:-1;left:-200%;'
				document.body.appendChild(printIframe)
				const domHead = document.querySelector('head')
				const doc = printIframe.contentDocument
				const iframeHead = doc.querySelector('head')
				doc.querySelector('html').style.overflow = 'auto'
				doc.querySelector('body').style.cssText ='overflow:auto;height:auto;background:#fff'
				iframeHead.innerHTML = domHead.innerHTML
				const printHtml = document.getElementById('printDiv')
				doc.body.innerHTML = printHtml.innerHTML
				setTimeout(()=>{
					printIframe.contentWindow.print()
				},200)
				setTimeout(()=>{
					printIframe.remove()
				}, 1000)
			},{disabled:!$fn.hasArray(selectedKeys)}),
		]
	}
	
	getBoardData = (rows) => {
		this.rows = rows
		const { id } = rows
		$http.pull(null, COVIDUrl+'/BoardInfo/query', {COVID:true,param:{board_id:id}}).then(data=>{
			if($fn.hasArray(data)){
				data.forEach((v,i)=>{
					v.spec_code = v.specCode
					v.board_no = v.boardNo
					v.exp_no = v.expNo
					this.tableNum[v.sort-1] = v
				})
				this.tableNum.forEach((v,i) => {
					if(v.dtype === 1){
						let negaI = parseInt(v.specCode.slice(-2))
						this.tableNum[i].negaI = negaI
					}
				})
			}
			this.codeListRef.setBoardValue(this.tableNum,rows)
		})
	}
	
	render(){
		return (
			<>
				<Page title='板号管理' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this, { timeStr:'7-0-24' }) }
					{/* 表格 */}
					<div className='ex fx oh'>
						<div className='ex fv' style={{minWidth:350}}>
							{ Table.call(this,{type:1,isIndex:true,onRow:(rows)=>{
								this.tableNum = new Array(96).fill('')
								this.getBoardData(rows)
							}}) }
						</div>
						<div className='fv oys scrollbar' style={{width:1150}}>
							<CodeList noButton={true} onRef={ref=>this.codeListRef=ref} onRefresh={this.fetch} />
						</div>
					</div>
				</Page>
			</>
		)
	}
}

export default Index